<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
	#contentArea {width: 900px; height: 100%; float: none; margin: 0 auto;}
	#contentTop {width: 100%; height: 50px; margin: 0 auto; vertical-align: middle;}
	#contentTop > h3 {float: none;}
	
	#contentMiddle {width: 100%;}
	#contentMiddle .accLine:FIRST-CHILD {border-top: 1px; border-top-color: black; border-top-style: solid; font-weight: bold;}
	#contentMiddle .accLine {width: 100%; border-bottom: 1px; border-bottom-color: black; border-bottom-style: solid; border-left: 1px; border-left-color: black; border-left-style: solid;}
	.accLine > div {height:100%; border-right: 1px; border-right-color: black; border-right-style: solid;}
	#contentMiddle .accLine .regDate {width: 110px; height: 100%;}
	#contentMiddle .accLine .income {width: 100px; height: 100%;}
	#contentMiddle .accLine .spending {width: 100px; height: 100%;}
	#contentMiddle .accLine .writer {width: 100px; height: 100%;}
	#contentMiddle .accLine .balance {width: 144px; height: 100%;}
	#contentMiddle .accLine .contents {width: 340px; height: 100%;}
</style>

<script type="text/javascript">
	function selectInOut(){
		$('#inoutMoney').attr('name', $('#inout').val());
	}
</script>
<title>WillThink 메인페이지</title>
</head>
<body>
	<div id="contentArea">
		<div id="contentTop">
			<h3>회계 페이지</h3>
		</div>
		<div id="contentMiddle">
			<div class="accLine">
				<div class="regDate">등록일</div>
				<div class="income">수입</div>
				<div class="spending">지출</div>
				<div class="writer">등록자</div>
				<div class="balance">총금액</div>
				<div class="contents">비고</div>
			</div>
			
			<c:if test="${!empty list }">
				<c:forEach var="account" items="${list}">
					<div class="accLine">
						<div class="regDate">${account.REGISTER_DATE }</div>
						<div class="income">${account.INCOME }</div>
						<div class="spending">${account.SPENDING }</div>
						<div class="writer">${account.NAME }</div>
						<div class="balance">${account.BALANCE }</div>
						<div class="contents">${account.CONTENTS }</div>
					</div>
				</c:forEach>
			</c:if>
			
			<div id="insertArea">
				<div id="insetAccL1">
					<div id="selectBox">
						<select id="inout" name="inout" onchange="selectInOut();">
							<option value="income">수입</option>
							<option value="spending">지출</option>
						</select>
					</div>
					<div id="moneyBox"><input type="text" id="inoutMoney" name="money"></div>
				</div>
				<div id="insertAccL2">
					<textarea rows="2" cols="20"></textarea>
				</div>
			</div>
		</div>
	</div>
</body>
</html>